/**
 * Message Actions Component
 * 
 * Provides action menu for messages (copy, delete, edit)
 */

import { Copy, Trash2, Edit2, MoreVertical, Check } from 'lucide-react';
import { useState } from 'react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

export interface MessageActionsProps {
  messageId: string;
  content: string;
  role: 'user' | 'assistant';
  onCopy?: (content: string) => void;
  onDelete?: (messageId: string) => void;
  onEdit?: (messageId: string, newContent: string) => void;
  className?: string;
}

export function MessageActions({
  messageId,
  content,
  role,
  onCopy,
  onDelete,
  onEdit,
  className,
}: MessageActionsProps) {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(content);
      setCopied(true);
      onCopy?.(content);
      setTimeout(() => setCopied(false), 2000);
    } catch (error) {
      console.error('Failed to copy:', error);
    }
  };

  const handleDelete = () => {
    if (confirm('确定要删除这条消息吗？')) {
      onDelete?.(messageId);
    }
  };

  const handleEdit = () => {
    const newContent = prompt('编辑消息内容：', content);
    if (newContent && newContent !== content) {
      onEdit?.(messageId, newContent);
    }
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          className={cn(
            'h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity',
            className
          )}
          title="消息操作"
        >
          <MoreVertical className="w-4 h-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-48">
        <DropdownMenuItem onClick={handleCopy}>
          {copied ? (
            <>
              <Check className="w-4 h-4 mr-2 text-green-500" />
              <span>已复制</span>
            </>
          ) : (
            <>
              <Copy className="w-4 h-4 mr-2" />
              <span>复制内容</span>
            </>
          )}
        </DropdownMenuItem>

        {/* 只允许编辑用户消息 */}
        {role === 'user' && onEdit && (
          <DropdownMenuItem onClick={handleEdit}>
            <Edit2 className="w-4 h-4 mr-2" />
            <span>编辑消息</span>
          </DropdownMenuItem>
        )}

        {onDelete && (
          <>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              onClick={handleDelete}
              className="text-red-600 focus:text-red-600 focus:bg-red-50"
            >
              <Trash2 className="w-4 h-4 mr-2" />
              <span>删除消息</span>
            </DropdownMenuItem>
          </>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

/**
 * Message Container with Actions
 * Wraps message content and shows actions on hover
 */
interface MessageWithActionsProps {
  messageId: string;
  content: string;
  role: 'user' | 'assistant';
  children: React.ReactNode;
  onCopy?: (content: string) => void;
  onDelete?: (messageId: string) => void;
  onEdit?: (messageId: string, newContent: string) => void;
}

export function MessageWithActions({
  messageId,
  content,
  role,
  children,
  onCopy,
  onDelete,
  onEdit,
}: MessageWithActionsProps) {
  return (
    <div className="group relative">
      {children}
      <div className="absolute top-2 right-2">
        <MessageActions
          messageId={messageId}
          content={content}
          role={role}
          onCopy={onCopy}
          onDelete={onDelete}
          onEdit={onEdit}
        />
      </div>
    </div>
  );
}

